<template>
    <div class="box">
        <div class="login-warp">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0">
                <h2 style="text-align: center; margin-bottom: 20px; color: #606266;">东东个人站</h2>
                <el-form-item prop="name">
                    <el-input prefix-icon="el-icon-user-solid" placeholder="用户名" class="long" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" type="password" placeholder="密码" class="long" v-model="ruleForm.password"></el-input>
                </el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">
                        登  录
                    </el-button>
            </el-form> 
        </div>
    </div>
</template>

<script>
    import Cookies from 'js-cookie'
    export default {
        name:"login",
        data(){
            return {
                ruleForm: {
                    name: '',
                    password: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入账号', trigger: 'change' },
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'change' },
                    ]
                },
                loading: false
            }
        },
        methods:{
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true
                        setTimeout(() => {
                            Cookies.set('name', this.ruleForm.name, { expires : 3 })
                            Cookies.set('password', this.ruleForm.password, { expires : 3 })
                            this.$router.push('/home')
                            this.loading = false
                        }, 700)
                    }
                });
            }
        }
    }

</script>

<style scoped>
    .box {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(../assets/images/background.jpg);
        background-size: cover;
        background-position: center center;
    }
    .login-warp {
        padding: 26px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
        border-radius: 4px;
    }
    .long {
        width: 300px;
    }
    .el-button {
        width: 100%;
    }
</style>